<template>
    <div class="checkBasis-add">
        <a-modal width="90%" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal checkBasis-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box ">
                            <a-form-model-item class="yuan-form-item" label="原料类型" prop="rawType">
                                <a-radio-group disabled v-model="formData.rawType" @change="rawTypeChange">
                                    <a-radio-button :value="item.rawType" v-for="item in tabsData"
                                        :key="item.name">{{item.name}}</a-radio-button>
                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="物料名称" prop="materialCode">
                                <a-select class="yuan-form-input" v-model="formData.materialCode" placeholder="请选择" show-search
                                    :filter-option="$filterOption">
                                    <a-select-option :value="item"
                                        v-for="item in materialList" :key="item">{{item}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item class="yuan-form-item yuan-form-col5" label="标准名称" prop="executeStandard">
                                <a-input class="yuan-form-input" v-model="formData.executeStandard" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="检验标准文件" class="yuan-form-item" v-if="pageReady">
                                <Upload :uploadLength="99" @uploadChange="uploadChange" :defImgList="checkoutStandardFile" />
                                <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="检验标准描述" prop="number">
                                <a-input type="textarea" style="width: 500px;" :rows="5"
                                    v-model="formData.checkoutStandardDescription" placeholder="请输入描述内容" :maxLength="200" />
                                <div class="textarea-number">
                                    {{ formData.checkoutStandardDescription ? formData.checkoutStandardDescription.length : 0 }}/200
                                </div>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { MaterialListRes, ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import config from "@/utils/config";
@Component({
    name: "Add",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Prop({ default: "中药材" }) rawType!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
        this.modalOption.title = this.infoId ? "编辑检测依据" : "新增检测依据";
    }
    tabsData = config.tabsData;
    pageReady = false;
    formLoading = false;
    checkoutStandardFile: string[] = [];
    modalOption = {
        title: "新增检测依据",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        executeStandard: [{ required: true, message: "标准名称", trigger: "blur" }],
    };
    formData: any = {};
    resetForm() {
        this.formData = {};
    }
    async mounted() {
        this.resetForm();
    }
    closeModal() {
        this.pageReady = false;
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                try {
                    this.formLoading = true;
                    let varietyName = this.formData.materialCode;
                    delete this.formData.createTime;
                    const res = await nextApi.editDetection({
                        ...this.formData,
                        varietyName,
                        checkoutStandardFile: this.checkoutStandardFile.join(";"),
                    });
                    this.$message.success(res.msg);
                    this.closeModal()
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    uploadChange(e: { url: string }[]) {
        this.checkoutStandardFile = e.map((item) => item.url);
    }
    async getDetail() {
        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getDetectionDetail({ id: this.infoId });
                this.formData = { ...res.data };
                this.checkoutStandardFile = res.data.checkoutStandardFile ? res.data.checkoutStandardFile.split(";") : [];
            } else {
                this.formData = { rawType: this.rawType };
                this.checkoutStandardFile = [];
            }
            this.pageReady = true;
        } finally {
            this.formLoading = false;
            this.materialList = [];
            this.getMaterials();
        }
    }
    materialList: MaterialListRes[] = [];
    async getMaterials() {
        try {
            this.formLoading = true;
            if (this.materialList && this.materialList.length > 0) return;
            const res = await nextApi.getMaterialNameList({
                productType: this.formData.rawType,
            });
            this.materialList = res.data || [];
        } finally {
            this.formLoading = false;
        }
    }
    rawTypeChange() {
        this.materialList = [];
        this.getMaterials();
    }
}
</script>
<style lang="scss">
.checkBasis-add-modal {
    .upload-tips {
        font-size: 12px;
        line-height: 20px;
        padding-bottom: 5px;
        color: #05b089;
    }
    .textarea-number {
        position: absolute;
        right: 10px;
        bottom: 2px;
        line-height: 20px;
        font-size: 12px;
    }
}
</style>
